<template>
 <div>
  <el-dialog
    title="提示"
    :visible.sync="showWindow"
    width="50%"
    :before-close="handleClose">
    <el-row class="quertionInfo">
      <el-col class="col" :span='6'>【题型】：{{myData.questionType|type}}</el-col>
      <el-col class="col" :span='6'>【编号】：{{myData.enterpriseID}}</el-col>
      <el-col class="col" :span='6'>【难度】：{{myData.difficulty|diff}}</el-col>
      <el-col class="col" :span='6'>【标签】：{{myData.tags}}</el-col>
      <el-col class="col" :span='6'>【学科】：{{myData.subjectName}}</el-col>
      <el-col class="col" :span='6'>【目录】：{{myData.directoryName}}</el-col>
      <el-col class="col" :span='6'>【方向】：{{myData.direction}}</el-col>
    </el-row>
      <hr>
     【题干】：<div v-html="myData.question" style="color:blue"></div>
     <div v-if="myData.questionType!=='3'">
        <div style="padding-bottom:5px">{{myData.questionType|type}} 选项：（以下选中的选项为正确答案）</div>
        <div v-for="item in myData.options" :key="item.code" style="padding:8px 0">
          <el-radio v-if="myData.questionType==='1'" :value="item.isRight" :label="1">{{item.title}}</el-radio>
          <el-checkbox v-if="myData.questionType==='2'" :value="item.isRight?true:false" >{{item.title}}</el-checkbox>
        </div>
      </div>
      <hr>
      【参考答案】：<el-button type="danger" @click="playVidio">视频答案预览</el-button>
      <div class="video" v-show="paly">
        <video ref="video" controls :src="myData.videoURL"></video>
      </div>
      <hr>

      【答案解析】：<div style="display:inline-block" v-html="myData.answer"></div>
      <hr>
      【题目备注】：{{myData.remarks}}

    <span slot="footer" class="dialog-footer">
      <el-button type="primary" @click="handleClose()">关 闭</el-button>
    </span>
  </el-dialog>
 </div>
</template>

<script>
import { detail } from '../../api/hmmm/questions'
import { questionType, difficulty } from '../../api/hmmm/constants'
export default {
  filters: {
    type (type) {
      if (type) return questionType.find(item => item.value === +type).label + '题'
    },
    diff (diff) {
      if (diff) return difficulty.find(item => item.value === +diff).label
    }
  },

  props: {
    data: {
      type: Object,
      default: () => {}
    }
  },
  data () {
    return {
      showWindow: false,
      myData: {},
      paly: false
    }
  },
  methods: {
    playVidio () {
      this.paly = true
    },
    async openWindow () {
      this.showWindow = true
      // console.log(this.data)
      const res = await detail(this.data)
      console.log(res)
      this.myData = res.data
      console.log(this.myData)
    },
    handleClose (done) {
      this.showWindow = false
      this.paly = false
    }
  }
}
</script>

<style scoped lang="scss">
.quertionInfo{
  .col{
      padding: 10px 0;
  }
}
.video{
  video{
    width: 500px;
  }
}
</style>
